<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view">
      <el-row shadow="hover" v-show="showSearch" class="ml10">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
          <el-form-item :label="$t('customer.roleName')" prop="roleName">
            <el-input :placeholder="$t('customer.inputRoleNameTip')" v-model="state.queryForm.roleName"/>
          </el-form-item>
          <el-form-item>
            <el-button icon="search" type="primary" @click="getDataList">
              {{ $t('common.queryBtn') }}
            </el-button>
            <el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <div class="mb8" style="width: 100%">
          <el-button icon="folder-add" type="primary" class="ml10">
            {{ $t('common.addBtn') }}
          </el-button>
        </div>
      </el-row>
    </div>
  </div>
</template>
<script lang="ts" name="customer" setup>
const showSearch = ref(true);
const queryRef = ref();
const state = reactive({
  queryForm: {
    roleName: '',
  },
});

const getDataList = () => {
  console.log('getDataList');
};

const resetQuery = () => {
  queryRef.value.resetFields();
  getDataList();

};

</script>
